<template>
  <div class="order-box">
    <nav-bar class="nav-bar">
      <template v-slot:default>
        定单列表
      </template>
    </nav-bar>

    <van-tabs ref="tabs" @click="onChangeTab"  class="order-tab">
    <van-tab title="全部"></van-tab>
    <van-tab title="待付款"></van-tab>
    <van-tab title="已支付"></van-tab>
    <van-tab title="发货"></van-tab>
    <van-tab title="交易完成"></van-tab>
    <van-tab title="过期"></van-tab>
  </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          @offset="10"
        >
          <div @click="goTo(item.id)" class="order-item-box" v-for="(item, index) in list" :key="index">
            <div class="order-item-header">
              <span style="line-height:30px;">订单号：{{item.order_no}} <br> 创建时间：{{item.created_at}}</span>
            </div>
           <van-card
                   v-for="sub in item.orderDetails.data"
                   :key="sub.id"
              :num="sub.num"
              :price="sub.goods.price"
              desc="全场包邮"
              :title="sub.goods.title"
              :thumb="sub.goods.cover_url"
            />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { reactive,ref, toRefs,onMounted } from 'vue';
import NavBar from "components/common/navbar/NavBar";
import { getOrderList } from 'network/order'
import { useRouter,useRoute } from 'vue-router';


export default {
  name: 'Order',
  components: {
    NavBar
  },
  setup() {
    /*
    List 组件通过 loading 和 finished 两个变量控制加载状态，
    当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
    此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
    若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
     */

    const router = useRouter()
    const route = useRoute()
    let tabs = ref(null);
    const state = reactive({
      loading: false,
      finished: false,
      refreshing: false,
      list:[],
      page:1,
      totalPage:0,
      status:0,
    })

    onMounted(()=>{
      onRefresh();  // 初使化
    })


    const  loadData = ()=>{
      getOrderList({page:state.page, status:state.status, include:'orderDetails.goods'}).then(res=>{
            state.list = state.list.concat(res.data);
            state.loading = false;

           console.log(state.page+"################");

            state.totalPage = res.meta.pagination.total_pages;

            if(state.page >= state.totalPage) {
               state.finished = true;
            }
      })
    }


    const onLoad = () => {

      if(!state.refreshing && state.page < state.totalPage) {
        state.page = state.page + 1;
      }


      if(state.refreshing) {
        state.list = [];
        state.refreshing = false;
      }

      loadData();
    }

    const onRefresh = () => {
      // 是否处于加载状态，加载过程中不触发load事件
      state.refreshing = true
      // 清空列表数据
      state.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true

      state.page = 1;

      onLoad()
  }

    // tab 切换
    const onChangeTab = (name) => {
        state.status = name;
        onRefresh();
    }

    // 到订单详情页
    const goTo = (id)=>{
       router.push({path:'/orderdetail', query:{id}});
    }

    return {
      ...toRefs(state),
      onLoad,
      onRefresh,
      tabs,
      onChangeTab,
      goTo
    }
  }
}
</script>

<style lang="scss" scoped>


  .order-box {
    text-align: left;
    .order-header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
      width:100%;
      height:44px;
      line-height: 44px;
      padding: 0 10px;
      color: #252525;
      background: #fff;
      border-bottom: 1px solid #dcdcdc;
      .order-name {
        font-size: 14px;
      }
    }
    .order-tab {
      margin-top: 44px;
      position: fixed;
      left: 0;
      z-index: 1000;
      width: 100%;
      border-bottom: 1px solid #e9e9e9;
    }


    .content {
      height:100vh;
      overflow: hidden;
      overflow-y: scroll; 
      padding-top: 100px;

    }
    .order-list-refresh {
      .van-card__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .van-pull-refresh__head {
        background: #f9f9f9;
      }

      .order-item-box {
        margin: 20px 10px;
        background-color: #FAFAFA;
        .order-item-header {
          padding: 10px 20px 0 20px;
          display: flex;
          justify-content: space-between;
        }
        .van-card {
          background-color: #FFFFFF;
          border-radius: 3px;
          margin-top: 10px;
        }
      }
    }
  }
</style>
